<script setup lang="ts">
import { onMounted } from 'vue'
import { getMemberLevel } from '@/api/user'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const memberInfo = ref<MemberLevel>()

onMounted(async () => {
  try {
    const res = await getMemberLevel()
    memberInfo.value = res.data
  } catch (e) {
    console.error('获取会员信息失败', e)
  }
})
</script>

<template>
  <view class="container">
    <nut-card>
      <nut-cell title="当前等级" :desc="memberInfo?.levelName || '普通会员'"/>
      <nut-cell title="累计积分" :desc="memberInfo?.totalPoints?.toString() || '0'"/>
      <nut-cell title="剩余积分" :desc="memberInfo?.remainingPoints?.toString() || '0'"/>
    </nut-card>

    <nut-card title="会员特权">
      <view class="privilege-list">
        <nut-cell 
          v-for="(item, index) in memberInfo?.privileges"
          :key="index"
          :title="item.name"
          :desc="item.description"
        >
          <template #icon>
            <nut-icon name="checked" />
          </template>
        </nut-cell>
      </view>
    </nut-card>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>